<template>
  <KView class="auth-dialog">
    <KView class="auth-image" :style="imgStyle">
      <img style="width:100%" :src="authImg" mode="widthFix">
      <KView class="auth-dialog-close" @click="close">
        <sys-svg name="close" color="#ffffff"></sys-svg>
      </KView>
    </KView>
    <KView class="auth-dialog-content">
      <KView class="auth-dialog-desc">
        <KView class="auth-dialog-title">登录授权</KView>
        <KView class="auth-dialog-text">一键授权，查看更多内容~</KView>
      </KView>
      <KView class="auth-dialog-btn-div">
        <KButton class="auth-dialog-btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="getUserInfo">立即授权</KButton>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';
  import SystemUtil from 'utils/systemUtil';

  import MinAuthApi from 'services/minAuthApi';
  import storeMixins from 'mixins/storeMixins';
  import SysSvg from 'common/sysSvg';

  export default {
    mixins: [storeMixins],

    computed: {
      imgStyle() {
        let width = -38 * this.width / 750;
        width = SystemUtil.roundValue(width);
        return {
          left: width + 'px'
        };
      }
    },

    data() {
      return {
        authImg: GlobalData.images.authDialog1,
        code: null
      };
    },

    created() {
      this.$api.login({
        success: res => {
          this.code = res.code;
        },
        fail: error => {
          this.code = null;
        }
      });
    },

    methods: {
      getUserInfo(event) {
        let detail = event.detail;
        let userInfo = detail.userInfo;
        if (userInfo === undefined) {
          return;
        }

        SystemUtil.showLoading('申请授权...');
        MinAuthApi.authLogin({
          encryptedData: detail.encryptedData,
          iv: detail.iv,
          code: this.code
        }).then(res => {
          SystemUtil.hideLoading();
          let user = res.user;
          if (SystemUtil.isEmpty(user.phoneNum)) {
            user.phoneNum = '';
          }
          this.setUser(user);
          this.setDefaultUser(null);

          this.setAuthToken(res.authToken);
          this.setRefreshToken({
            data: res.refreshToken,
            time: this.$moment().valueOf()
          });
          this.$emit('auth-success', res);
        }).catch(error => {
          SystemUtil.hideLoading();
        });
      },

      close() {
        let defaultUser = {
          openid: 'o7dLn5eCmpdDJRu4fiVaLDZcQEi0',
          headimgurl: GlobalData.images.sysLogo
        };
        this.setDefaultUser(defaultUser);
        this.$emit('close');
      }
    },

    components: {
      SysSvg
    }
  };

</script>

<style lang="scss">
  .auth-dialog {
    width: 100%;
    height: calc(100% - #{formatPx(200)});
    padding-top: formatPx(200);
    position: relative;

    .auth-image {
      position: absolute;
      top: 0;
      width: formatPx(656);
    }

    .auth-dialog-close {
      position: absolute;
      right: 0;
      top: 0;
      width: formatPx(22);
      height: formatPx(22);
      background: rgba(0, 0, 0, .4);
      border-radius: formatPx(25);
      padding: formatPx(14);
    }

    .auth-dialog-content {
      height: 100%;
      background: #ffffff;
      border-bottom-left-radius: 35px;
      border-bottom-right-radius: 35px;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .auth-dialog-desc {
        flex: 1;
        text-align: center;
        padding-top: formatPx(85);

        .auth-dialog-title {
          font-size: formatPx(36);
        }

        .auth-dialog-text {
          font-size: formatPx(30);
          color: #474747;
          margin-top: formatPx(10);
        }
      }

      .auth-dialog-btn-div {
        height: formatPx(110);

        .auth-dialog-btn {
          width: 100%;
          height: 100%;
          background: #E60012;
          color: #ffffff;
          text-align: center;
          line-height: formatPx(110);
          font-size: formatPx(30);
          border: none;
          border-radius: 0;
          padding: 0;
          font-weight: normal;
        }
      }
    }
  }

</style>
